<template>
    <v-tooltip location="top">
        <template v-slot:activator="{ props }">
            <v-chip
                :prepend-icon="icon"
                variant="outlined"
                v-bind="props"
                :disabled="!designStore.editCss"
                @click="
                    () => {
                        show = true
                    }
                "
                @click:close="delFunction"
            >
                {{ command }}
            </v-chip>
        </template>
        点击编辑或删除
    </v-tooltip>
    <v-dialog
        v-model="show"
        width="300"
        transition="dialog-top-transition"
        persistent
        absolute
        style="display: flex; justify-content: right"
    >
        <v-card :title="title">
            <v-divider style="margin: 10px 30px 0px 30px"></v-divider>
            <v-card-text>
                <div style="display: flex">
                    <div style="width: 45%">
                        <v-checkbox
                            label="相对值"
                            hide-details
                            v-model="basicAttr.relative"
                        ></v-checkbox>
                    </div>
                    <v-tooltip location="top">
                        <template v-slot:activator="{ props }">
                            <v-icon
                                style="margin: 14px 5px 0 -5px"
                                icon="mdi-help-circle-outline"
                                v-bind="props"
                            ></v-icon> </template
                        >勾选时，相对于当前位置进行变化<br />未勾选时，变化到指定位置
                    </v-tooltip>
                </div>
                <div
                    v-for="(value, key) in attrDict"
                    style="
                        margin: 0 5% 5% 5%;
                        display: flex;
                        justify-content: space-between;
                    "
                >
                    <h4 style="justify-content: flex-start">{{ key }}</h4>
                    <div style="justify-content: flex-end">
                        <input
                            class="input"
                            style="text-align: center; width: 50px"
                            v-model="basicAttr[value[0]]"
                        />{{ value[1] }}
                    </div>
                </div>
                <v-divider style="margin: 20px 0 20px 0"></v-divider>
                <div
                    style="
                        margin: 5% 5% 0 5%;
                        display: flex;
                        justify-content: space-between;
                    "
                >
                    <h4 style="justify-content: flex-start">缓动</h4>
                    <div style="justify-content: flex-end">
                        <select
                            class="select"
                            v-model="basicAttr.slowMotion"
                        >
                            <option value="none">无</option>
                            <option
                                value="linear"
                                selected
                            >
                                线性
                            </option>
                            <option value="accelerate">加速</option>
                            <option value="decelerate">减速</option>
                        </select>
                    </div>
                </div>
                <div
                    style="
                        margin: 5% 5% 0 5%;
                        display: flex;
                        justify-content: space-between;
                    "
                    :style="{
                        opacity: basicAttr.slowMotion === 'none' ? '0.6' : '1'
                    }"
                >
                    <h4 style="justify-content: flex-start">时长</h4>
                    <div style="justify-content: flex-end">
                        <input
                            class="input"
                            style="text-align: center; width: 50px"
                            :disabled="basicAttr.slowMotion === 'none'"
                            v-model="basicAttr.duration"
                        />ms
                    </div>
                </div>
                <div
                    style="
                        margin: 5% 5% 0 5%;
                        display: flex;
                        justify-content: space-between;
                    "
                >
                    <h4 style="justify-content: flex-start">延时</h4>
                    <div style="justify-content: flex-end">
                        <input
                            class="input"
                            style="text-align: center; width: 50px"
                            v-model="basicAttr.delay"
                        />ms
                    </div>
                </div>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-icon></v-icon>
                <v-btn
                    text="返回"
                    @click="
                        () => {
                            show = false
                        }
                    "
                ></v-btn>
                <v-btn
                    text="删除"
                    @click="delFunction"
                ></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-dialog
        v-model="delDialog"
        persistent
        width="auto"
    >
        <v-card style="width: 300px">
            <v-icon
                @click="delDialog = false"
                style="position: absolute; right: 0%"
                >mdi-close</v-icon
            >
            <v-card-text style="padding-top: 15%">
                Confirm to delete this {{ command }} function ?</v-card-text
            ><v-card-actions>
                <div style="position: absolute; right: 0%">
                    <v-btn
                        @click="confirmDelFunction"
                        style="color: cadetblue"
                        >confirm</v-btn
                    >
                    <v-btn @click="delDialog = false">close</v-btn>
                </div>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
export default {
    props: {
        // 'Click'
        funcName: String,
        // 'move'
        command: String
    },
    data() {
        return {
            designStore: useDesignStore(),
            attrDict: {},
            icon: '',
            title: this.funcName + '_' + this.command,
            show: false,
            delDialog: false
        }
    },
    methods: {
        confirmDelFunction() {
            delete this.designStore.currentDomPointer.attr[this.funcName][
                this.command
            ]
            this.designStore.currentDomPointer.template[this.command][this.funcName] = {}
        },
        delFunction() {
            this.delDialog = true
        }
    },
    computed: {
        basicAttr() {
            return this.designStore.currentDomPointer.template[this.command][this.funcName]
        }
    },
    created() {
        if (this.command === 'move') {
            this.attrDict = {
                X: ['left', '%'],
                Y: ['top', '%']
            }
            this.icon = 'mdi-move-resize-variant'
        } else if (this.command === 'zoom') {
            this.attrDict = {
                width: ['width', '%'],
                height: ['height', '%']
            }
            this.icon = 'mdi-resize'
        } else {
            this.attrDict = {
                rotateX: ['rotateX', '°'],
                rotateY: ['rotateY', '°'],
                rotateZ: ['rotateZ', '°']
            }
            this.icon = 'mdi-rotate-3d'
        }
    }
}
</script>
